<template>
  <div class="dataStatistics">
    <my-bread-crumb>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    </my-bread-crumb>
    <el-card class="box-card">
      <el-row>
        <el-col :span="10"> 近七天的数据统计情况：</el-col>
        <el-col :span="14"><el-button type="primary" @click="exportExcel">导出excel文件</el-button></el-col>
      </el-row>
      <el-table
        :data="result.records"
        stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="keyName" label=" "></el-table-column>
        <el-table-column  v-for="key in result.dateKeys" :prop="key" :label="key"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {getStatisticFormExcel, getStatisticForm, StatisticData} from '@/network/admin'
import MyBreadCrumb from "@/components/MyBreadCrumb";
export default {
  name: "DataStatistics",
  components: {MyBreadCrumb},
  data(){
    return{
      result:{
        records:[],
        dateKeys:[]
      }
    }
  },
  created() {
    this.getStatistics();
  },
  methods:{
    exportExcel(){
      getStatisticFormExcel().then(res=>{
        let downloadFile=document.createElement('a');
        let blob=new Blob([res.data], {type:"application/vnd.ms-excel;charset=UTF-8"});
        downloadFile.href=window.URL.createObjectURL(blob);
        downloadFile.download=
          decodeURI(res.headers['content-disposition'].split('filename=')[1]);
        downloadFile.click();
        window.URL.revokeObjectURL(downloadFile.href);
      })
    },
    async getStatistics(){
      const {data:res,code} = await getStatisticForm();
      if(code===200){
        const {dateKeys,records}=new StatisticData(res);
        this.result.records=records;
        this.result.dateKeys =dateKeys.sort((val1,val2)=>{return val1.localeCompare(val2);});  //对日期进行排序
      }
      else{
        this.$message.error({message:'获取统计数据报表失败！',duration:1000});
      }
    }
  }
}
</script>

<style scoped>
  .el-row{
    line-height: 40px;
    font-size: 20px;

  }

  .el-button{
    float:right;
  }
</style>
